<template>
	<div id="app">

		<Ref />
		<Props />
		<MixIn />
		<Plugins />
		<PropS/>

		<ScopedStyle />
		<ComponentEvent />
		<GlobalEventBus />
		<Pubsub />
		<AnimationVue />
		<AgentServer />
		<SlotUse />
	</div>
</template>

<script>
import Ref from './refAttributes/Ref'
import Props from './propsAttributes/PropS'
import MixIn from './mixIn/MixIn'
import Plugins from './plugins/Plugins'
import ScopedStyle from './scopedStyle/ScopedStyle'
import ComponentEvent from './componentEvent/ComponentEvent'
import GlobalEventBus from './globalEventBus/GlobalEventBus'
import Pubsub from './pubsub/Pubsub'
import PropS from "@/components/Learn/propsAttributes/PropS";
import AnimationVue from './animationVue/AnimationVue'
import AgentServer from './agentServer/AgentServer'
import SlotUse from './slot/SlotUse'

export default {
	name: "LearnVue",
	components: {
		Ref,
		Props,
		MixIn,
		Plugins,
		ScopedStyle,
		ComponentEvent,
		GlobalEventBus, PropS,
		Pubsub,
		AnimationVue,
		AgentServer,
		SlotUse
	}
}
</script>

<style>


hr.one { /*内嵌水平线*/
	width: 80%;
	margin: 0 auto;
	border: 0;
	height: 6px;
	border-top: 4px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

hr.two { /*透明渐变水平线*/
	width: 80%;
	margin: 0 auto;
	border: 0;
	height: 5px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.three { /*渐变*/
	width: 90%;
	margin: 0 auto;
	border: 0;
	height: 5px;
	background: #333;
	background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}
</style>
